<template>
  <div class="father">
      <h2>父组件</h2>
      <h3>银子:{{ money }}</h3>
      <h3>车:{{ car.name }}，价格:{{ car.price }}</h3>
      <Child  />
  </div>
</template>

<script setup lang="ts">
import Child from './Child.vue'
import { reactive, ref,provide } from 'vue'

let money=ref(1000)
let car=reactive({
  name:'奔驰',
  price:100
})

function updateMoney(x:number){
  money.value-=x
}

provide('money',{money,updateMoney})
provide('che',car)
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>